<template>
  <div class="nanning-screen-cascader">
    <el-cascader
      :options="options"
      v-model="selectValue"
      @change="onChangeValue"
      :placeholder="placeholder"
      popper-class="cascader-dark">
    </el-cascader>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Emit } from 'vue-property-decorator'
@Component({
  name: 'nanning-screen-cascader'
})

export default class NanningScreenCascader extends Vue {
  @Prop({ default: '请选择' }) private placeholder!: string

  @Prop({ default: [] }) private options!: Array<any>

  @Emit()
  private onChangeValue(e: any) {
    return e
  }

  private selectValue = ''
}
</script>

<style lang="scss">
.nanning-screen-cascader {
  width: 100%;
  height: 100%;
  .el-cascader {
    border-radius: 2px;
    overflow: hidden;
  }
  .el-input__inner {
    height: 32px;
    line-height: 32px;
    background: rgba($color: #01146B, $alpha: 1);;
    border: 1px solid #0B3685;
    color: rgba(255, 255, 255, 0.7);
  }
}
.cascader-dark {
  background: rgba($color: #01146B, $alpha: 0.9) !important;
  border: 1px solid #0B3685 !important;
  .el-cascader-menu {
    color: rgba(255, 255, 255, 0.7) !important;
  }
  .el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover {
    background: rgba($color: #0B3685, $alpha: 0.8);
  }
}
</style>

<style lang="scss" scoped>
.nanning-screen-select {

}
</style>
